<template>
  <div class="main"></div>
</template>

<script>
export default {
  name: "PieCharts",
  mounted() {
    let ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';

    // 初始化对象，echarts.init(dom容器)
    let myEcharts = this.$echarts.init(document.querySelector(".main"));

    // 定义显示图片
    let weatherIcons = {
      'Sunny': ROOT_PATH + '/data/asset/img/weather/sunny_128.png',
      'Cloudy': ROOT_PATH + '/data/asset/img/weather/cloudy_128.png',
      'Showers': ROOT_PATH + '/data/asset/img/weather/showers_128.png'
    }

    let option = {
      // 标题数据
      title: {
        // 主标题文本，支持使用 \n 换行。
        text: '天气情况统计',
        // 副标题文本
        subtext: '虚构数据',
        // title 组件离容器左侧的距离。
        left: 'center'
      },
      //提示框组件。
      tooltip: {
        //提示框触发的条件，可选：
        triggerOn: "none",
        // 触发类型。  数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
        trigger: 'item',
        // 输出格式
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      // 图例
      legend: {
        // 图例组件离容器下侧的距离。
        bottom: 10,
        //图例组件离容器左侧的距离。
        left: 'center',
        data: ['西凉', '益州', '兖州', '荆州', '幽州']
      },
      // 系列列表。每个系列通过 type 决定自己的图表类型
      series: [
        {
          type: 'pie',
          // 饼图的半径。 尺寸为容器的65%
          radius: '65%',
          // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
          center: ['50%', '50%'],
          // 选中模式的配置，表示是否支持多个选中，默认关闭  'single'，'multiple'，分别表示单选还是多选。
          selectedMode: 'single',
          // 数据
          data: [
            {
              value: 1548,
              name: '幽州',
              //单个扇区的标签配置。
              label: {
                // 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。
                formatter: [
                  '{title|{b}}{abg|}',
                  '  {weatherHead|天气}{valueHead|天数}{rateHead|占比}',
                  '{hr|}',
                  '  {Sunny|}{value|202}{rate|55.3%}',
                  '  {Cloudy|}{value|142}{rate|38.9%}',
                  '  {Showers|}{value|21}{rate|5.8%}'
                ].join('\n'),
                // 文字块背景色。
                backgroundColor: '#eee',
                // 文字块边框颜色。
                borderColor: '#777',
                // 文字块边框宽度。
                borderWidth: 1,
                // 文字块的圆角。
                borderRadius: 4,
                // 在 rich 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。
                rich: {
                  title: {
                    color: '#eee',
                    align: 'center'
                  },
                  abg: {
                    backgroundColor: '#333',
                    width: '100%',
                    align: 'right',
                    height: 25,
                    borderRadius: [4, 4, 0, 0]
                  },
                  Sunny: {
                    height: 30,
                    align: 'left',
                    backgroundColor: {
                      image: weatherIcons.Sunny
                    }
                  },
                  Cloudy: {
                    height: 30,
                    align: 'left',
                    backgroundColor: {
                      image: weatherIcons.Cloudy
                    }
                  },
                  Showers: {
                    height: 30,
                    align: 'left',
                    backgroundColor: {
                      image: weatherIcons.Showers
                    }
                  },
                  weatherHead: {
                    color: '#333',
                    height: 24,
                    align: 'left'
                  },
                  hr: {
                    borderColor: '#777',
                    width: '100%',
                    borderWidth: 0.5,
                    height: 0
                  },
                  value: {
                    width: 20,
                    padding: [0, 20, 0, 30],
                    align: 'left'
                  },
                  valueHead: {
                    color: '#333',
                    width: 20,
                    padding: [0, 20, 0, 30],
                    align: 'center'
                  },
                  rate: {
                    width: 40,
                    align: 'right',
                    padding: [0, 10, 0, 0]
                  },
                  rateHead: {
                    color: '#333',
                    width: 40,
                    align: 'center',
                    padding: [0, 10, 0, 0]
                  }
                }
              }
            },
            {value: 735, name: '荆州'},
            {value: 510, name: '兖州'},
            {value: 434, name: '益州'},
            {value: 335, name: '西凉'}
          ],
          // 高亮状态的扇区和标签样式。
          emphasis: {
            itemStyle: {
              // 图形阴影的模糊大小。shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
              shadowBlur: 10,
              //  阴影水平方向上的偏移距离。
              shadowOffsetX: 0,
              // 阴影颜色。支持的格式同color。
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]

    }

    myEcharts.setOption(option);

  }
}
</script>

<style scoped>
.main {
  width: 1000px;
  height: 1000px;
  margin: 0px auto;
}
</style>
